<template>
  <div class="messageBao">
    <Message ref="history" :list="historyMessage" :self="self" />
  </div>
  <div class=" nana input bg-[#f6f6f6]">
    <!-- 暴露出去得事件名叫enter $emit子组件让父组件传值 -->
    <Editor ref="message" :jargon="jargon" :disabled="!self || !self['to_name']" @enter="$emit('enter', $event)" />
  </div>
</template>

<script setup lang="ts">
import './style.css'
import Message from '../message/Message.vue';
import Editor from '../editor/Editor.vue';
import { type IProps } from './props';
import { type IEmits } from './emits';
import { ref, watch, nextTick } from 'vue';


// 历史
const history = ref<InstanceType<typeof Message> | null>(null)
const message = ref()

// withDefaults可以接收两个参数
const props = withDefaults(defineProps<IProps>(), {
  historyMessage: () => []
})
defineEmits<IEmits>()


watch(
  () => props.self,
  () => {
    nextTick(() => {
      if (message.value) {
        console.log("我调用了");

        message.value.reset()
      }
    });
  },
  { deep: true }
);

// 将方法暴露给父组件
defineExpose({
  scrollToBottom: () => {
    if (history.value) {
      history.value.scrollToBottom()
      console.log('histoy调用滚动条方法');
    }
  }
})
</script>

<style>
.nana {
  height: 10%;
}
</style>